<template>
  <div>
    <div class="content">
      <h3>支付宝账号</h3>
      <van-field
        v-model="account1"
        placeholder="请输入支付宝账号"
        class="van_field"
      />
      <h3>重复支付宝账号</h3>
      <van-field
        v-model="account2"
        placeholder="请重复输入支付宝号码"
        class="van_field"
      />
      <h3>真实姓名</h3>
      <van-field
        v-model="realname"
        placeholder="请输入您的真实姓名"
        class="van_field"
      />
      <h3>验证或绑定邮箱</h3>
      <van-field v-model="email" placeholder="请输入邮箱" class="van_field" />
      <h3>验证绑定手机号</h3>
      <van-field
        type="tel"
        v-model="phone"
        placeholder="请输入渠道ID绑定手机号，若有疑问可咨询专员"
        class="van_field"
      />
      <div style="position: relative">
        <van-field
          type="digit"
          v-model="code"
          placeholder="请输入验证码"
          class="van_field_code"
        />
        <van-button type="info" round class="button_code" @click="codeClick">{{
          codeMsg
        }}</van-button>
      </div>
      <van-button type="info" class="sure_bind" @click="bind">确认绑定</van-button>
    </div>
  </div>
</template>

<script>
import { test } from '@/common/common.js';
import { getAliPay, getCode } from '../../../network/home';

export default {
  data() {
    return {
      account1: '',
      account2: '',
      realname: '',
      email: '',
      phone: '',
      code: '',
      // 是否禁用按钮
      codeDisabled: false,
      // 倒计时秒数
      countdown: 60,
      // 按钮上的文字
      codeMsg: '获取验证码',
      // 定时器
      timer: null,
    };
  },
  methods: {
    codeClick() {
      this.getCountDown();
    },
    getCountDown() {
      // 验证码60秒倒计时
      getCode(this.phone).then((res) => {
        console.log(res);
        if (res.state === 'ok') {
          if (!this.timer) {
            this.timer = setInterval(() => {
              if (this.countdown > 0 && this.countdown <= 60) {
                this.countdown--;
                if (this.countdown !== 0) {
                  this.codeMsg = '重新发送(' + this.countdown + ')';
                } else {
                  clearInterval(this.timer);
                  this.codeMsg = '获取验证码';
                  this.countdown = 60;
                  this.timer = null;
                  this.codeDisabled = false;
                }
              }
            }, 1000);
          }
        }else if (res.state === "err") {
          if (res.msg === "no_login") {
            this.$router.replace("/login");
          }else {
            this.$toast(res.msg)
          }
        }
      });
    },
    bind() {
      getAliPay(this.account1, this.account2, this.realname, this.email, this.phone, this.code).then(res => {
        console.log(res)
        if (res.state === 'ok') {
          this.$toast(res.msg)
          this.push('/withdrawal')
        }else if (res.state === "err") {
          if (res.msg === "no_login") {
            this.$router.replace("/login");
          }else {
            this.$toast(res.msg)
          }
        }
      })
    },
  },
};
</script>

<style scoped>
.content {
  width: 680px;
  padding: 0 35px;
}

h3 {
  padding: 25px 0 10px 0;
  font-size: 30px;
  color: #333;
  font-weight: 400;
}

.van_field {
  padding: 0;
  line-height: 80px;
  font-size: 28px;
  border-bottom: 1px solid rgb(211, 211, 211);
}

.van_field_code {
  padding: 0;
  line-height: 120px;
  font-size: 28px;
  border-bottom: 1px solid rgb(211, 211, 211);
}

.button_code {
  position: absolute;
  top: 30px;
  right: 0;
  width: 250px;
  font-size: 28px;
  height: 60px;
  line-height: 60px;
  background: #4152e5;
}

.sure_bind {
  width: 680px;
  height: 88px;
  border-radius: 10px;
  font-size: 30px;
  margin-top: 100px;
  margin-bottom: 120px;
  background: #4152e5;
}
</style>
